<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>全屏掉落表情包</title>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.3/dist/jquery.min.js"></script>
  </head>

  <body>
    <!--
        代码来源：https://juejin.cn/post/7186544270021492792
    -->
    <a
      class="github"
      href="https://github.com/xiaoli1999/fullScreen-animation"
      target="_blank"
    >
      <img src="./img/github.png" alt="github" />
      <span>star</span>
    </a>
    <script>
      /**
       * @file full.js 全屏掉落动画
       * @description 全屏动画js
       * @author xiao li
       * @copyright 黎<https://www.xiaoli.vip>
       * @createDate 2023-02-10 16:20
       */

      const emoteList = [
        "🐰",
        "🐇",
        "🧨",
        "🎉",
        "🐇",
        "🏮",
        "🐰",
        "💰",
        "⛄",
        "🐇",
        "❄",
        "🧧",
      ];

      let innerW, innerH;

      const setInnerSize = () => {
        innerW = window.innerWidth;
        innerH = window.innerHeight;
      };

      /**
       * @function JudgePC 判断是当前浏览器信息是否为pc
       * @return { Boolean } 返回是否是pc
       */
      const JudgePC = () => {
        let userAgent;
        if (window && window.navigator) {
          userAgent = window.navigator.userAgent;
        } else {
          return true;
        }

        const agents = [
          "Android",
          "iPhone",
          "SymbianOS",
          "Windows Phone",
          "iPod",
          "iPad",
        ];
        for (let i = 0; i < agents.length; i++) {
          if (userAgent.indexOf(agents[i]) >= 0) return false;
        }
        return true;
      };

      let isPc = JudgePC();

      /**
       * @function 生成随机表情元素
       * @returns {{emoteEl: HTMLDivElement, emoteParams: {left: number, top: number, opacity: number, fs: number, transitionDuration: number}}}
       */
      const createEmoteElement = () => {
        const fsRange = isPc ? [20, 16] : [14, 6];
        const fs = fsRange[0] + Math.round(Math.random() * fsRange[1]);
        const left = Math.round(Math.random() * (innerW - fs / 2 - fs / 2));
        const top = -fs - 10;
        const opacity = ((Math.random() * 16 + 84) / 100).toFixed(2) - 0;
        const transitionDuration = 2000 + Math.round(Math.random() * 2000);

        const emoteEl = $("<div></div>")
          .css({
            position: "absolute",
            color: "#fff",
            top: `${top}px`,
            left: `${left}px`,
            fontSize: `${fs}px`,
            opacity: opacity,
            zIndex: 9999,
            textShadow: `0 0 ${fs / 3}px #ffffffcc`,
            transition: `transform ${transitionDuration}ms linear`,
          })
          .html(emoteList[Math.round(Math.random() * (emoteList.length - 1))]);

        return {
          emoteEl,
          emoteParams: { fs, left, top, opacity, transitionDuration },
        };
      };

      const setEmoteAnimate = () => {
        const { emoteEl, emoteParams } = createEmoteElement();
        $("body").append(emoteEl);

        const leftRange = isPc ? [-80, 80] : [-40, 40];
        const endLeft = emoteParams.left + leftRange[Math.round(Math.random())];
        const endTop =
          innerH - emoteEl.height() + Math.round(Math.random() * 10);
        const moveDuration = innerH * 10 + Math.round(Math.random() * 4000);
        const endScale =
          1.2 + ((Math.round(Math.random() * 4) / 10).toFixed(2) - 0);
        const hideDuration = 1200 + Math.round(Math.random() * 2000);

        emoteEl.animate(
          { left: `${endLeft}px`, top: `${endTop}px` },
          moveDuration,
          "linear",
          () => {
            emoteEl
              .css({ transform: `scale(${endScale})` })
              .animate({ opacity: 0 }, hideDuration, "linear", () =>
                emoteEl.remove()
              );
          }
        );
      };

      let num = 0;
      const start = () =>
        setInterval(
          () => {
            if (num % 10 === 0) {
              setInnerSize();
              isPc = JudgePC();
            }
            num += 1;
            setEmoteAnimate();
          },
          isPc ? 320 : 600
        );

      $(document).ready(() => start());

      console.log(
        "%c 🐇年春节全屏动画效果🌈 | 黎 | https://github.com/xiaoli1999 ",
        "color: #f4f4f4;background: #444; padding:5px 0;border-radius:2px;"
      );
    </script>
    <style>
      /**
 * @file index.css
 * @description 样式表
 * @author xiao li
 * @copyright 黎<https://www.xiaoli.vip>
 * @createDate 2023-01-09 12:20
 */
      * {
        margin: 0;
        padding: 0;

        /* 去除文字被选中蓝色背景 */
        -moz-user-select: none;
        /*火狐*/
        -webkit-user-select: none;
        /*webkit浏览器*/
        -ms-user-select: none;
        /*IE10*/
        user-select: none;
      }

      html {
        width: 100%;
        height: auto;
        overflow: hidden;
      }

      a:hover,
      a:visited,
      a:link,
      a:active {
        color: inherit;
      }

      body {
        position: relative;
        width: 100%;
        height: 100vh;
        background: url("./img/bg.png") center no-repeat;
        background-size: cover;
        overflow: hidden;
      }

      .github {
        position: absolute;
        bottom: 16%;
        right: 8%;
        z-index: 99999;
        display: flex;
        align-items: center;
        padding: 2px 8px 2px 4px;
        background: #ffffff90;
        /*backdrop-filter: blur(12px);*/
        border-radius: 2px;
        box-shadow: inset 0 0 8px 1px #f4f4f480;
        font-size: 14px;
        text-decoration: none;
        transition: all 0.24s linear;
      }

      .github:hover {
        box-shadow: inset 0 0 8px 1px #ffffff, 1px 1px 6px 0.5px #00000060;
      }

      .github img {
        width: 18px;
        height: 18px;
        margin-right: 6px;
      }

      @media only screen and (max-width: 768px) {
        body {
          background: url("./img/bg-mobile.png") center no-repeat;
          background-size: cover;
        }

        .github {
          position: absolute;
          bottom: 24px;
          right: 24px;
        }
      }
    </style>
  </body>
</html>
